<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery\jquery.js"></script>
    <style>
        div{
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <h1 id="x">aaa</h1>

    <h1 id="x">aaa</h1>
    <h1 id="x">aaa</h1>
    <h1 id="x">aaa</h1>

    <script>
        $(function(){
            //克隆
            $("#x").click(function(){
                alert("clone");
            });

            //var $new=$("#x").clone();//复制但不复制事件
            var $new=$("#x").clone(true);//如果要复制事件，需要传true
            $new.html("hello<b>world</b>");
            $new.css("color","red");
            $("#x").after($new);

            $("#x").replaceWith($("<p>123</p>")); //放在前边，，替换，被替换的节点.replaceWith(替换的内容) $("p").replaceWith($("#x"));

            //包裹
            // $("h1").wrap("<div></div>") //分开包裹 （打包整个标签）

            // $("h1").wrapAll("<div></div>") //一次包裹满足所有的（统一打包）

            $("h1").wrapInner("<div></div>")//包裹h1标签的内容 （分开打开标签的内容）

        })


        对元素的内容进行操作
            text对元素的文本内容进行操作
                $("p").text()   读取p标签的内容 
                $("p").text("hello")    设置p标签文本内容
            html对元素的html进行操作
                $("p").html()   读取p标签的内容 
                $("p").html("hello")    设置p标签文本内容
            对元素的值进行操作
                val 相当于原来的value属性
                val()   读取
                val("hello")    设置
            创建节点
                var $newNode = $("<p>hello</p>")
                var $Node = $("#x")
            增加了节点
                在开头增加
                    .$(selector).prepend(content);
                    父节点.prepend(新增子节点)
                    $(content).prependTo(selector);
                    新增子节点.prependTo(父节点)
                在末尾增加
                    $(selector).append(content);
                    父节点.append(新增子节点)
                    $(content).appendTo(selector);
                    新增子节点.appendTo(父节点)
                增加兄弟节点
                    在前边增加
                        $("h1").before($newNode);
                        $(A). before (B)表示将B插入至A之前
                        eg：$("ul").before($newNode1);
                        $(A). insertBefore (B)表示将A插入到B之前
                        eg：$newNode1.insertBefore("ul");
                    在后边增加
                        $("h1").after($newNode);
                        $(A).after (B)表示将B插入到A之后
                        eg：$("ul").after($newNode1);
                        $(A). insertAfter (B)表示将A插入到B之后
                        eg：$newNode1.insertAfter("ul");
            删除节点
                $(selector).remove();
                remove()    删除整个节点，不保留事件和附加数据
                var $node=$("h2").detach();//删除保留事件
                detach()    删除整个节点，保留事件和附加数据
                $(selector).empty();
                var $node=$("div").empty();//删除div/删除匹配的元素集合中所有的子节点。（删除儿子）/*清空子节点，但保留节点本身*/
                empty()     清空子节点，但保留节点本身
                remove()    删除整个节点，不保留事件和附加数据，返回被删除的节点对象
                delete()    删除整个节点，保留事件和附加数据，返回被删除的节点对象
            复制
                clone()     复制但不复制事件
                clone(true)     复制并复制事件
            替换
                被替换的节点 replaceWith(替换内容)




            

            遍历节点
                $("li").each(function(index,element){
                        console.log($(this).index()+$(this).text());
                        console.log(index+$(element).text());
                });
            利用节点关系找节点
                儿子  后代
                父亲  祖先
            操作css样式
                css("属性名")  读取属性值  var color = $("#x").css("color");
                css("属性名","属性值")
                css({"属性名":"属性值","属性名":"属性值"})
            添加删除class值
                addClass
                removeClass
                toggleClass





    </script>
</body>
</html>